<template>
    <div class="app">
        <header-menu></header-menu>
        <div class="main">
            <aside class="pa">
                <aside-menu></aside-menu>
            </aside>
            <div class="content">
                <bread-crumb></bread-crumb>
                <router-view></router-view>
            </div>
        </div>
        <login></login>
    </div>
</template>
<script>
    import './assets/style/styleReset.styl';
    import headerMenu from './components/headerMenu.vue';
    import asideMenu from './components/asideMenu.vue';
    import breadCrumb  from './components/breadCrumb.vue';
    import login  from './components/login.vue';
    export default {
        data(){
            return {}
        },
        components: {
            headerMenu,
            asideMenu,
            breadCrumb,
            login
        }
    }
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
    .app
        min-width:1200px
    .main
        border-top: 2px solid #1f2d3d
        aside
            width: 260px
        .content
            padding-left: 270px
            height: 1000px
            overflow-y auto
            &::-webkit-scrollbar-thumb{
                /*width: 10px;*/
                height: 20px;
                border-radius: 5px;
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
                background-color: #1f2d3d;
            }
            &::-webkit-scrollbar-track{
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
                border-radius: 5px;
                background-color: #f5f5f5;
            }
            &::-webkit-scrollbar{
                width: 10px;
                height: 10px;
                background-color: #f5f5f5;
            }
            
</style>